<template>
  <div class="actions-detail">
    <ul class="group-list">
      <li class="group-item"
        v-for="(g,key, i) in groupList"
        :key="i">
        <p class="group-title">{{key}}</p>
        <ul class="key-list">
          <li class="key-item"
            v-for="(ks, i) in g"
            :key="i">
            <span class="key-value">{{ks.id}}</span>
            <p class="key-disc">{{ks.name}}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
import * as anov from 'anov-core'

export default {
  name: 'ActionsMore',
  components: {},
  model: {},
  props: {},
  data() {
    return {
      keyList: []
    }
  },
  computed: {
    groupList() {
      let group = {}
      this.keyList.forEach(key => {
        let type = key.type || 'default'
        if (group[type]) {
          group[type].push(key)
        } else {
          group[type] = []
          group[type].push(key)
        }
      })
      return group
    }
  },
  watch: {},
  created() {
    this.keyList = anov.actionServer.getActions()
  },
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.actions-detail {
  padding: 20px;
  .group-list {
    .group-item {
      .group-title {
        padding: 0 0 10px 0;

        color: #8db5b2;

        font-size: 14px;
        text-transform: capitalize;
      }
    }
  }
  .key-list {
    .key-item {
      display: flex;
      flex-wrap: wrap;
      flex-wrap: wrap;
      align-items: center;

      margin-bottom: 12px;
      .key-value {
        display: inline-block;

        padding: 2px 6px;
        border-radius: 2px;

        color: #28ae57;
        background-color: #2b303c;
      }
      .key-disc {
        margin-left: auto;

        opacity: .8;

        font-size: 12px;
        white-space: nowrap;
      }
    }
  }
}
</style>